<template>
	<div class="login">
		<uni-popup ref="activatePopup" class="me-popup" background-color="#fff" @change="change">
			<view class="popup-content">
				<image class="logo" src="https://pic.imgdb.cn/item/65c33fad9f345e8d03ca6a51.png" alt="" />
				<view class="form-box">
					<view class="title">
						邀请公主王子<br />补全个人信息（昵称、头像）
					</view>
					<view class="row">
						<view class="label">
							头像
						</view>
						<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"
							slot="right">
							<image class="avatar" :src="avatarUrl"></image>
						</button>

					</view>

					<view class="row">
						<view class="label">
							昵称
						</view>
						<input type="nickname" placeholder="请输入昵称" style="text-align: right;"  @blur="blurInput"/>
					</view>
				</view>

				<view @click="updateButton" class="acButton">确 定</view>
			</view>

		</uni-popup>
		<div class="round1"></div>
		<div class="round2"></div>
		<div class="round3"></div>
		<div class="round4"></div>
		<div class="login-title">现在登录</div>
		<view class="text">登录即可享受各项服务内容，助力公主王子成功上岸</view>
		<view @click="login" class="but-login">登 录</view>
		<view @click="back" class="concel">取 消</view>



	</div>
</template>

<script setup>
	import util from '../../util/index.js'
	import {
		pathToBase64,
		base64ToPath
	} from 'image-tools'
	import {
		ref
	} from 'vue'
	const avatarUrl = ref(
		'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
	)
	const avatarUrlBase64 = ref('');
	const activatePopup = ref();
	const userInfo = ref({});
	const userName = ref('');
	const blurInput = (e) => {
		console.log('e',e.detail )
		userName.value = e.detail.value
	}
	const updateButton = () => {
		
		if(avatarUrlBase64.value == '') {
			
			uni.showToast({
				title: '请选择头像',
				icon:'none',
				duration: 1500
			});
			return
		}
		if(userName.value == '') {
			
			uni.showToast({
				title: '请输入昵称',
				icon:'none',
				duration: 1500
			});
			return
		}
		uni.showLoading({
			title: '请等待'
		});
		uni.request({
		
			url: util.baseUrl + '/wxapi/user/updateUserInfoAvatar',
			data: {
				id:userInfo.value._id,
				userName:userName.value,
				avatarUrlBase64:avatarUrlBase64.value,
				openid:userInfo.value.openid
			},
			method: 'POST',
			success: (res) => {
				// console.log(res.data);
			    uni.hideLoading();
				// uni.setStorageSync('userInfo', res.data.data);
				// userInfo.value = res.data.data
				// activatePopup.value.open()
				// setTimeout(() => {
				// 	uni.navigateBack()
				// }, 10)
				if(res.data.code == 200) {
					uni.setStorageSync('userInfo', res.data.data);
					uni.showToast({
						title: '修改信息成功',
						duration: 1500
					});
				setTimeout(() => {
					uni.navigateBack()
				}, 1000)
				}
			},
			fail: () => {
				uni.hideLoading();
			}
		})
	}
	const login = () => {
		uni.showLoading({
			title: '登录中'
		});

		uni.login({
			provider: 'weixin', //使用微信登录
			success: (loginRes) => {
				console.log('loginRes', loginRes);
				uni.request({
					url: util.baseUrl + '/wxapi/user/login',
					data: {
						code: loginRes.code
					},
					method: 'POST',
					success: (res) => {
						console.log(res.data);
						uni.hideLoading();
						uni.setStorageSync('userInfo', res.data.data);
						userInfo.value = res.data.data
						if(!userInfo.value.avatarUrl) {
							activatePopup.value.open()
						}else {
							uni.showToast({
								title: '登录成功',
								duration: 1000
							});
							setTimeout(() => {
								uni.navigateBack()
							}, 1000)
						}
						
						
					},
					fail: () => {
						uni.hideLoading();
					}
				});
			}
		});
	}
	const back = () => {
		uni.navigateBack()
	}
	const onChooseAvatar = (e) => {
		console.log('头像信息》')
		console.log(e)
		avatarUrl.value = e.detail.avatarUrl;
		pathToBase64(e.detail.avatarUrl).then(path => {
			avatarUrlBase64.value = path
			console.log('path', path)
		}).catch(error => {
			console.log(error)
		})

	}
</script>

<style lang="scss">
	.login {
		overflow: hidden;
		height: 100vh;
		background-color: #fff;

		.uni-popup__wrapper {
			border-radius: 20rpx;
		}

		.popup-content {
			position: relative;
			padding: 30rpx 50rpx;
			width: 500rpx;
			height: 600rpx;
			border-radius: 10rpx;

			.logo {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
			}

			.form-box {
				margin-top: 150rpx;

				.title {
					text-align: center;
					margin-bottom: 20rpx;
				}

				.row {
					position: relative;
					height: 100rpx;
					line-height: 100rpx;
					display: flex;
					padding-bottom: 10rpx;
					border-bottom: 2rpx solid #bfbfbf;

					.label {
						width: 100rpx;
					}

					input {
						line-height: 100rpx;
						height: 100rpx;
					}

					.avatar-wrapper {
						width: 100%;
						height: 100rpx;
						color: #333 !important;
						text-align: center !important;
						border: none !important;
						border-radius: 0 !important;
						background-color: transparent !important;
					}

					.avatar-wrapper::after {
						border: none !important;
					}

					image {
						position: absolute;
						right: 0rpx;
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
					}

				}
			}



			.acButton {
				width: 300rpx;
				height: 80rpx;
				line-height: 80rpx;
				background-color: #ffc637;
				font-size: 36rpx;
				font-weight: 700;
				color: #3a2e27;
				text-align: center;
				border-radius: 40rpx;
				margin: 0 auto;
				margin-top: 20rpx;
			}
		}

		.round1 {
			position: absolute;
			top: 50rpx;
			left: -60rpx;
			background-color: #fdd624;
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
		}

		.round2 {
			position: absolute;
			right: 50rpx;
			top: 100rpx;
			width: 80rpx;
			height: 80rpx;
			opacity: 1;
			background: rgba(252, 210, 46, 1);
			border-radius: 50%;
		}

		.round3 {
			position: absolute;
			right: -75rpx;
			top: 120rpx;
			width: 150rpx;
			height: 150rpx;
			opacity: 1;
			background: rgba(245, 189, 5, 0.36);
			border-radius: 50%;
		}

		.round4 {
			position: absolute;
			right: 20rpx;
			top: 150rpx;
			width: 200rpx;
			height: 200rpx;
			opacity: 1;
			background: rgba(219, 201, 33, 0.27);
			border-radius: 50%;
		}

		.login-title {
			position: absolute;
			left: 30rpx;
			top: 200rpx;
			font-size: 50rpx;
			font-weight: 700;
		}

		.but-login,
		.concel {

			// height: 60rpx;
			border-radius: 30rpx;
			font-weight: 700;
			height: 80rpx;
			line-height: 80rpx;
			width: 620rpx;
			margin: 0 auto;
			/// font-size: 28rpx;
			// line-height: 60rpx;
			text-align: center;
		}

		.but-login {
			background: linear-gradient(to left, #fdd21f, #ffe537);
			margin-bottom: 30rpx;
			color: #371636;
		}

		.concel {
			background-color: #ededed !important;
		}

		.text {
			margin-top: 280rpx;
			margin-bottom: 50rpx;
			font-size: 30rpx;
			color: #646464;
			width: 100%;
			text-align: center;
		}
	}
</style>